<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>CSS Demo</title>
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
#dragImg {
	border: 1px solid red;
	width: 100%;
	height: 92px;
}

#dragImg div {
	width: 31.7%;
	height: 70px;
	padding: 10px;
	border: 1px solid #aaaaaa;
	float: left;
}
#rightShow{
 height: 80px;
 background:url(images/rightShow.jpg) no-repeat center;
}
body {
	text-align: center;
}
body div{
	float:left;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
	function dragOver(ev) {
		ev.preventDefault();
	}

	function dragStart(ev) {
		ev.dataTransfer.setData("Text", ev.target.id);
	}

	function drop(ev) {
		ev.preventDefault();
		var data = ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));
	}
	function rightShow(){
		if($("#rightShow").width() < $("body").width()){
			if($("#rightShow").width()+10 < $("body").width()){
				$("#rightShow").width($("#rightShow").width()+10);
			}else{
				$("#rightShow").width($("body").width());
			}
			setTimeout("rightShow()",1);
		}
	}
	function rightHidden(){
		if($("#rightShow").width() > 0){
			$("#rightShow").width($("#rightShow").width()-10);
			setTimeout("rightHidden()",1);
		}
	}
</script>
</head>
<body>
	<div id="dragImg">
		<div id="div1" ondragover="dragOver(event)" ondrop="drop(event)">
			<img id="drag1" src="images/w3school_banner.gif" draggable="true"
				width="336" height="69" ondragstart="dragStart(event)" />
		</div>
		<div id="div2" ondragover="dragOver(event)" ondrop="drop(event)"></div>
		<div id="div3" ondragover="dragOver(event)" ondrop="drop(event)"></div>
	</div>
	<!-- 绘图:颜色填充  Begin-->
	<div id="canvas">
		<canvas id="myCanvas" width="200" height="100" 
			style="border:1px solid #c3c3c3;">
		</canvas>
	</div>
	<script type="text/javascript">
	var c = document.getElementById("myCanvas");
	var cxt = c.getContext("2d");
	cxt.fillStyle = "#cc1234";
	cxt.fillRect(0, 0, 200, 100);
	</script>
	<!-- End -->
	<!-- 绘图:直线绘图  Begin-->
	<div id="canvas2">
		<canvas id="myCanvas2" width="200" height="100"
			style="border:1px solid #c3c3c3;">
		</canvas>
	</div>
	<script type="text/javascript">
	var c = document.getElementById("myCanvas2");
	var cxt = c.getContext("2d");
	/*两个参数，第一个 向右移动，第二个向下移动，更多的lineTo 会是开始连接结束的位置*/
	cxt.moveTo(0, 50);
	cxt.lineTo(170,50);
	cxt.lineTo(85,0);
	cxt.lineTo(0,50);
	cxt.lineTo(85,100);
	cxt.lineTo(170,50);
	cxt.lineTo(85,0);
	cxt.lineTo(85,100);
	cxt.stroke();
	</script>
	<!-- End -->
	<!-- 绘图:画弧形或圆形 Begin -->
	<div id="canvas3">
		<canvas id="myCanvas3" width="200" height="100"
			style="border:1px solid #c3c3c3;">
		</canvas>
	</div>
	<script type="text/javascript">
	var c=document.getElementById("myCanvas3");
	var cxt=c.getContext("2d");
	cxt.beginPath();
	/*向右移动，向下移动，图案大小，起始位置，结束位置，顺时针逆时针控制*/
	cxt.arc(100,50,30,Math.PI*1.1,Math.PI*0,true);
	//cxt.closePath(); //弧形是否封闭
	cxt.stroke(); //stroke 描边的方式画图
	</script>
	<!-- End -->
	<!-- 绘图:圆形,填充颜色 Begin-->
	<div id="canvas4" onclick="fillyuan()">
		<canvas id="myCanvas4" width="200" height="100"
			style="border:1px solid #c3c3c3;">
		</canvas>
	</div>
	<script type="text/javascript">
	var start = 0;
	var end = 2;
		function fillyuan(){
			var c=document.getElementById("myCanvas4");
			var cxt=c.getContext("2d");
				cxt.beginPath();
				if(end%2 == 0){
					//fill 是填充  fillstyle 是填充颜色
					cxt.fillStyle="#FF0000";
					/*向右移动，向下移动，图案大小，起始位置，结束位置，顺时针逆时针控制*/
					cxt.arc(100,50,30,Math.PI*start,Math.PI*0,true);
				}else{
					cxt.fillStyle="#00FF00";
					/*向右移动，向下移动，图案大小，起始位置，结束位置，顺时针逆时针控制*/
					cxt.arc(100,50,30,Math.PI*start,Math.PI*0,true);
				}
				if(start >= 2){
					start = 0;
					end += 1;
				}
				start += 0.1;
				cxt.closePath();
				cxt.fill(); //没有填充颜色的话 就不要用 fill 填充来绘图
				setTimeout("fillyuan()","1");
		}
	</script>
	<!-- End -->
	<!-- 绘图:渐变色填充 Begin -->
	<div id="canvas5">
		<canvas id="myCanvas5" width="200" height="100"
			style="border:1px solid #c3c3c3;">
		</canvas>
	</div>
	<script type="text/javascript">
	var c=document.getElementById("myCanvas5");
	var cxt=c.getContext("2d");
	/*渐变参数：开始的坐标X，Y 结束的坐标X，Y*/
	var grd=cxt.createLinearGradient(0,50,200,0);
	/*起始颜色*/
	grd.addColorStop(0,"#CC0000");
	/*结束颜色*/
	grd.addColorStop(1,"#00FFFF");
	/*将渐变后的颜色赋值给fillstyle*/
	cxt.fillStyle=grd;
	/*填充渐变，向右移动，向下移动，宽，高*/
	cxt.fillRect(0,0,200,100);
	</script>
	<!-- End -->
	<div style="width: 100%;height: 104px;border:1px black solid;">
		<div style="width: 100%;">
			<div id="rightShow">
			</div>
		</div>
		<button id="btnRightShow" onclick="rightShow()">Show</button>
		<button id="btnRighthidden" onclick="rightHidden()">Hidden</button>
	</div>
</body>
</html>
